<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    custom-class="promptDialog"
    :show-close="false"
    :append-to-body="true"
    :width="width"
    >
    <div slot="title" class="flexbox flexcenter flexbetween" style="width:100%">
        <div class="dialog-title">
            <slot name="title"></slot>
        </div>
        <div @click="closeDialog" class="flexbox" style="cursor:pointer">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M20.1298 9.63026C20.6158 9.14427 20.6158 8.35633 20.1298 7.87035C19.6438 7.38436 18.8558 7.38436 18.3699 7.87035L13.9998 12.2404L9.62977 7.87035C9.14378 7.38436 8.35585 7.38436 7.86986 7.87035C7.38387 8.35633 7.38387 9.14427 7.86986 9.63026L12.2399 14.0003L7.86986 18.3703C7.38387 18.8563 7.38387 19.6443 7.86986 20.1303C8.35585 20.6162 9.14378 20.6162 9.62977 20.1303L13.9998 15.7602L18.3699 20.1303C18.8558 20.6162 19.6438 20.6162 20.1298 20.1303C20.6158 19.6443 20.6158 18.8563 20.1298 18.3703L15.7597 14.0003L20.1298 9.63026Z" fill="#ACB2BB"/></svg>
        </div>
    </div>
    <div class="dialog-content">
        <slot></slot>
    </div>
    <div slot="footer" class="dialog-footer flexbox flexcenter">
      <div class="footer_btn flexbox flexcenter" style="color:#5C636C" @click="closeDialog">取 消</div>
      <div class="footer_btn flexbox flexcenter" style="color:#FFFFFF;margin-left:10px" :style="{'background':sumbitColor,border: `1px solid ${sumbitColor}`}" @click="onSubmit">{{ sumbitText }}</div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    sumbitText: {
      type: String,
      default: "确 定",
    },
    sumbitColor: {
      type: String,
      default: "#409EFF",
    },
    title:{
      type:String,
      default:""
    },
    width:{
      type:String,
      default:""
    }
  } ,
  data() {
    return {};
  },
  methods: {
    closeDialog() {
        this.$emit("update:dialogVisible",false)
        this.$emit("onClose")
    },
    onSubmit(){
        this.$emit("onSubmit")
    }
  },
};
</script>

<style scoped>
>>>.promptDialog .el-dialog__header{
    padding: 16px 16px 0px !important;
    border-bottom: none !important;
    height: unset !important;
}
>>>.promptDialog .el-dialog__body{
    padding: 0 16px !important;
}

>>>.promptDialog .el-dialog__footer{
    padding: 0 16px 28px !important;
}
.dialog-title{
    display: flex;
    color: #191B1E;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px; 
}
.dialog-content{
    width: 100%;
}
.dialog-footer{
    justify-content: flex-end;
}
.footer_btn{
    font-size: 14px;
    cursor: pointer;
    justify-content: center;
    min-width: 82px;
    max-width: 160px;
    height: 36px;
    padding: 0px 8px;
    border-radius: 12px;
    border: 1px solid #E8EAEC;
    background: #FBFBFC;
}
</style>